<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <script src="Vue.js"></script>

</head>
<body>

<hr>

<div id="root">
    <table cellpadding="5">
        <tr>
            <th valign="top">注册邮箱:</th>
            <td>
                <input type="text"><br>
                你还可以手机注册
            </td>
        </tr>

        <tr>
            <th>
                创建密码:
            </th>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <th>真实姓名:</th>
            <td><input type="text"></td>
        </tr>

        <tr>
            <th align="right">性别:</th>
            <td>
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女
            </td>
        </tr>

        <tr>
            <th align="right">生日:</th>
            <td>
                <select v-model="year">
                    <option v-for="y in yearList">{{y}}</option>
                </select>
                年
                <select v-model="month">
                    <option v-for="m in monthList">{{m}}</option>
                </select>
                月
                <select v-model="day">
                    <option v-for="d in dayList">{{d}}</option>
                </select>
                日
            </td>
        </tr>

        <tr>
            <th align="right">我正在:</th>
            <td>
                <select name="doSomething">
                    <option value="">睡觉</option>
                    <option value="" selected>吃饭</option>
                    <option value="">拉屎</option>
                    <option value="">上课</option>
                    <option value="">游戏</option>
                </select>
            </td>
        </tr>

        <tr>
            <th></th>
            <td>
                <img v-bind:src="codeImgUrl" alt="验证码">
                <span @click="changeVeryCode" style="color: #4494ff"><u>看不清楚，换一张</u></span>
            </td>
        </tr>

        <tr>
            <th align="right">验证码:</th>
            <td><input type="text" v-model="codeKey"></td>
        </tr>

        <tr>
            <th></th>
            <td>
                <img src="./btn_reg.gif" alt="立即注册" @click="verifyUserCode">
            </td>
        </tr>
    </table>
</div>


<script>
    new Vue({
        el: '#root',
        data: {
            codeKey: '',
            codeImgUrl: 'verycode.gif',
            imgList: ["1111.png", '1234.png', '2222.png', '3333.png', '4567.png', 'verycode.gif'],
            codeList: ['1111', '1234', '2222', '3333', '4567', 'bnksu'],
            currImgIndex: 5,
            year: '',
            month: '',
            day: ''
        },
        methods: {
            changeVeryCode: function () {
                // 随机获取新的验证码，并保证与上次不同
                var nextIndex = Math.floor(Math.random() * this.imgList.length);
                while (nextIndex == this.currImgIndex) {
                    nextIndex = Math.floor(Math.random() * this.imgList.length);
                }
                // 替换img属性
                this.codeImgUrl = this.imgList[nextIndex];
                // 将替换后的对应下标存储
                this.currImgIndex = nextIndex;
            },
            verifyUserCode: function () {
                // 获取当前验证码code
                var code = this.codeList[this.currImgIndex];
                // 验证用户输入（注意全部转换为大写）
                if (code == this.codeKey.toLowerCase()) {
                    alert("sign up success!")
                } else {
                    alert("verify code fail!")
                }
                this.codeKey = "";
            }
        },
        computed: {
            yearList: function () {
                var list = [];
                for (var i = 2021; i >= 1949; i--) {
                    list.push(i)
                }
                if (this.year=='') this.year=list[0];
                return list;
            },
            monthList: function () {
                var list = [];
                for (var i = 1; i < 10; i++) {
                    list.push('0' + i)
                }
                for (var i = 10; i <= 12; i++) {
                    list.push(i)
                }
                if (this.month=='') this.month = list[0];
                return list;
            },
            dayList: function () {
                var list = [];
                for (var i = 1; i < 10; i++) {
                    list.push('0' + i)
                }
                for (var i = 10; i <= 28; i++) {
                    list.push(i)
                }
                if (this.day=='') this.day=list[0]
                if (this.month == '02') {
                    if (this.year % 400 == 0 || (this.year % 100 != 00 && this.year % 4 == 0)) {
                        list.push(29)
                    }
                    return list;
                }
                list.push(29)
                list.push(30)
                if (this.month == '04' || this.month == '06' || this.month == '09' || this.month == '11') {
                    return list
                }
                list.push(31)
                return list;
            }
        }
    })
</script>
</body>
</html>